<template>
  <div class="mapWrapPicture">
    <div class="containerWrap" ref="mapScreenfull">
      <div class="infoButton">
        <i @click='screenfullMap' class="iconfont icon-quanping2"></i>
      </div>
      <div class="colorWrapRack">
        <div v-for="(item,index) in bicycleCountList" :key="index">
          <span v-show="item.color" class="colorlist" :style="'background-color:'+item.color"></span>
          <span v-show="item.src"><img src="./images/Intelligent.png" height="18" width="25"/></span>
          <span class="countStyle"> {{ item.count }}</span>
          <span class="labelStyle">{{ item.label }}</span>
        </div>
      </div>
      <div id="mapContainer"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["colorslist", "district", "areaInfo", 'bicycleCount', 'bicycleList'],
  data() {
    return {
      map: "",
      searchInfoWindow: "",
      mapInfoWindow: "",
      markers: [],
      mapClickMarker: "",
      ply: [],
      bicycleCountList: [],
      nameTypeMap: {
        "美团": 'MT',
        "青桔": 'QJ',
        "哈啰": 'HL',
      },
      typeNameMap: {
        "MT": '美团',
        "QJ": '青桔',
        "HL": '哈啰',
      }
    }

  },
  mounted() {
    this.getHotMap()
  },
  created() {

  },
  methods: {
    //渲染tab总数：
    initTab() {
      let bicycleCount = this.$props.bicycleCount
      let _bicycleCountList = []
      bicycleCount = _.remove(bicycleCount, (item) => {
        return item.enterpriseName !== '全部' && item.enterpriseName !== '摩拜'
      })
      if (bicycleCount && bicycleCount.length > 0) {
        _.each(bicycleCount, (item) => {
          let obj = {
            color: this.$store.state.splitMapColors[this.nameTypeMap[item.enterpriseName]],
            count: item.totalCount,
            label: item.enterpriseName
          }
          _bicycleCountList.push(obj)
        })
        this.bicycleCountList = _bicycleCountList
      }
    },
    //百度提取区域经纬度
    getBoundary(areaPoints) {
      let _this = this, arr = []
      if (areaPoints && areaPoints.length > 2) {
        _this.map.clearOverlays();        //清除地图覆盖物
        areaPoints.forEach((item) => {
          arr.push(new BMap.Point(item.lng, item.lat))
        })
        //              Polyline  Polygon
        _this.ply = new BMap.Polyline(arr, {
          strokeColor: "#3975FE",    //边线颜色。
          fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
          strokeWeight: 1,       //边线的宽度，以像素为单位。
          strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
          fillOpacity: 1,      //填充的透明度，取值范围0 - 1。
          strokeStyle: 'solid' //边线的样式，solid或dashed。
        });  //创建多边形

        _this.map.addOverlay(_this.ply);  //添加覆盖物
        _this.map.setViewport(_this.ply.getPath());    //调整视野
        setTimeout(() => {
          _this.addMarkes(_this.areaInfo)
        }, 100)
      }
    },
    //清除指定覆盖物
    deletePoint() {
      let allOverlay = this.map.getOverlays();
      for (var i = 0; i < allOverlay.length - 1; i++) {
        if (allOverlay[i].getLabel().content == "我是id=1") {
          this.map.removeOverlay(allOverlay[i]);
          return false;
        }
      }
    },

    getHotMap() {
      let _this = this
      _this.map = new BMap.Map("mapContainer", {
        enableMapClick: false,
        minZoom: 10
      });// 创建地图实例

      _this.map.centerAndZoom(new BMap.Point(this.$store.state.userInfo.lng, this.$store.state.userInfo.lat), 19);          // 初始化地图，设置中心点坐标和地图级别
      _this.map.enableScrollWheelZoom(); // 允许滚轮缩放

      _this.map.addControl(new BMap.OverviewMapControl());
      _this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
      this.map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
      setTimeout(() => {
        _this.addMarkes(_this.areaInfo)
      }, 100)

    },

    addMarkes(dataInnfo) {
      let _this = this, vectorMarker, arr = []
      let bicycleList = this.$props.bicycleList
      bicycleList.forEach(item1 => {
        let startIcon = new BMap.Marker(new BMap.Point(Number(item1.lng), Number(item1.lat)), {icon: new BMap.Icon('./static/images/point.png', new BMap.Size(32, 70)),})
        _this.map.addOverlay(startIcon)
        _this.addClickHandler(startIcon, item1);
      })
    },
    addClickHandler(marker, info) {
      let _this = this
      marker.addEventListener("click", function (e) {
          let point = e.point
          let content = '<div class="mapTopWrap">' +
            '<div style="color: #50545D; padding: 10px;">企业：' + _this.typeNameMap[info.enterpriseNo] + '</div>' +
            '</div> '
          //创建检索信息窗口对象
          this.searchInfoWindow = null;
          this.searchInfoWindow = new BMapLib.SearchInfoWindow(this.map, content, {
            title: name,      //标题
            panel: 'panel',         //检索结果面板
            enableAutoPan: true,     //自动平移
            offset: new BMap.Size(-20, -20),
            searchTypes: []
          });
          this.marker = new BMap.Marker(point); //创建marker对象
          this.searchInfoWindow.open(this.marker)
        }, true
      )
    },
    screenfullMap() {
      if (this.screenfull.enabled) {
        this.screenfull.toggle(this.$refs.mapScreenfull);
      }
    },

  },
  watch: {
    areaInfo() {
      this.getHotMap()
    },
    bicycleList() {
      this.initTab()
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl"
.mapWrapPicture
  width: 100%;
  height 100%

  &:hover .infoButton
    opacity: 1 !important;

  .containerWrap
    height: 100%;
    width: 100%;
    margin 0px auto;
    position: relative;

    .infoButton
      height 31px
      font-size: 16px;
      color: #6A6FFC;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index 5
      opacity: 0;

      .iconfont
        display: inline-block;
        font-size: 18px;
        cursor pointer

    .colorWrapRack
      position: absolute;
      left 10px;
      top: 10px;
      line-height 25px
      vertical-align middle
      padding 10px
      border-radius 5px
      z-index: 5;
      color: black;
      background-color rgba(255, 255, 255, 0.8)

      .colorlist
        display: inline-block;
        width: 21px;
        height 13px;
        line-height: 25px;
        vertical-align: middle;

      .labelStyle
        font-size: 12px;
        color: #50545D;
        float: right;
        margin-left: 10px;

      .countStyle
        color: #3975FE;
        float: right;
        min-width: 40px;
        text-align: right;

    #mapContainer
      height: 100%;
      width: 100%;

  .mapTopWrap
    background-color: white;
    overflow: hidden;
    // min-height 90px;
    /*width 240px*/

    .mapBaseTitle
      color: #3975FE;
      font-size: 12px;
      writing-mode: vertical-lr;
      letter-spacing: 5px;
      float: left;
      padding: 11px;

  .BMapLib_SearchInfoWindow
    width 200px !important

    &::after
      content: ""
      position: absolute;
      background-color: white;
      width: 100px;
      height: 3px;
      bottom: 0px;
      left: 50px;
      z-index 100

  .BMapLib_bubble_title {
    padding-left: 14px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    background-color white
    border-radius 10px !important
    /*display none !important*/
  }

  .BMapLib_bubble_top, .BMapLib_bubble_close {
    border-radius 10px !important
    border none !important
    background-color #f9f9f9 !important
  }

  #BMapLib_SearchInfoWindow0, .BMapLib_SearchInfoWindow {
    border-radius 10px !important
    /*min-width 200px !important*/
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.34) !important
    border none
  }

  .BMapLib_SearchInfoWindow .BMapLib_bubble_center {
    position static !important /*position absolute
      left 0
      top 31px*/
  }

/*.BMapLib_bubble_content {
  min-height 100px !important
}*/

</style>
